<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的列表渲染</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="(item, index) of items" :key="item.id">
            <!-- 1. v-for指令是循环列表的,:key指令的作用就是为了让循环出来的dom唯一,值类似于之前jquery和原生js的id属性值 -->
            {{item.text}} --- {{index}}
            <template>
                <!-- 2. template标签是vue中的标签,这个标签可以用来使用vue指令,并且不会展示到页面,就是页面不会有这个标签存在,里面的内容相当于没有换行放在了一起 -->
                *** {{item.id}}
            </template>
        </div>
        <p></p>
        <template v-for="(item, key, index) of userInfo" :key="index"> <!-- 3. 循环对象属性,多了一个key,key就是对象的属性名 -->
            <div>{{key}} -- {{item}} -- {{index}}</div>
        </template>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                items: [
                    { id: 1, text: "1" },
                    { id: 2, text: "2" },
                    { id: 3, text: "3" },
                ],
                userInfo: {
                    id: 1,
                    name: '张三',
                    age: '250',
                    sex: '1'
                }
            }
        })

        /*
            vue中改变数组的内容,然后页面跟着变动不能直接操作数据,因为这样数组内容其实是会改变的但是页面的内容并没有变.需要使用Vue的set()方法
            这个方法是一个全局对象: Vue.set(数组,索引,内容)
            这个set方法还可以改变对象的内容,直接操作对象是无法让页面也跟着变动,所以还是要用set方法: Vue.set(对象,属性名,属性值)
            set方法不仅是vue的全局对象可以使用,局部的vue对象也可以使用: app.$set()
        */
    </script>
</body>

</html>